<template>
  <div class="change-box">
    <div class="change-box-header">
        <h2>更新日志</h2>
    </div>
    <div class="change-box-content">
      <Timeline>
          <TimelineItem>
              <p class="time">1976年</p>
              <p class="content">Apple I 问世</p>
          </TimelineItem>
          <TimelineItem>
              <p class="time">1984年</p>
              <p class="content">发布 Macintosh</p>
          </TimelineItem>
          <TimelineItem>
              <p class="time">2007年</p>
              <p class="content">发布 iPhone</p>
          </TimelineItem>
          <TimelineItem>
              <p class="time">2010年</p>
              <p class="content">发布 iPad</p>
          </TimelineItem>
          <TimelineItem>
              <Icon type="trophy" slot="dot"></Icon>
              <p class="time">2017-11-19</p>
              <p class="content">正式发布基于vuejs、iview的第一版版本</p>
          </TimelineItem>
      </Timeline>
    </div>
  </div>
</template>
<script>
    export default {

    }
</script>

<style scoped lang="less">
.change-box {
  margin:2px auto;
  width:800px;
  background: #fff;
  border-radius: 5px;
  padding:20px;
  &-header {
    height: 40px;
    line-height: 40px;
    border-bottom:1px solid #f0f0f0;
  }
  &-content {
    margin-top:20px;
  }
  .time{
      font-size: 14px;
      font-weight: bold;
  }
  .content{
      padding-left: 5px;
  }
}
</style>

